
    
        
    
    <div data-role="page" id="page-tutorial" data-theme="f" >
      
      
      
        <script type="text/javascript">
    
    /*
     * IMPORTANT!!!
     * REMEMBER TO ADD  rel="external"  to your anchor tags. 
     * If you don't this will mess with how jQuery Mobile works
     */
    
    
      
      // $(document).ready(function(){         
        // var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, jQueryMobile });
      // });
      
    
      
      (function(window, Util, PhotoSwipe){
      
      Util.Events.domReady(function(e){
        
        var instance;
        
        instance = PhotoSwipe.attach(
          [
            { url: 'images/tutorial/start_white-arrow-mobile.jpg', caption: ''}, /*url: 'images/tutorial/start_white.png', caption: ''},*/
            { url: 'images/tutorial/1-profile-mobile.jpg', caption: ''},  /*url: 'images/tutorial/1-profile.png', caption: ''},*/
            { url: 'images/tutorial/shake_mod-mobile.jpg', caption: ''},  //url: 'images/tutorial/shake_mod.png', caption: ''},
            { url: 'images/tutorial/group-mobile.jpg', caption: ''},  /*url: 'images/tutorial/group.png', caption: ''},*/
            { url: 'images/tutorial/notify-mobile.jpg', caption: ''} /*url: 'images/tutorial/notify.png', caption: ''}*/
          ],
          {
            target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
            preventHide: true,
            loop:false,
            getImageSource: function(obj){
              return obj.url;
            },
            getImageCaption: function(obj){
              return obj.caption;
            }
          }
        );
        
        indicators = window.document.querySelectorAll('#Indicators span');
        
        // onDisplayImage - set the current indicator
        instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
          
          var i, len;
          for (i=0, len=indicators.length; i<len; i++){
            indicators[i].setAttribute('class', '');
          }
          indicators[e.index].setAttribute('class', 'current');
          
          if(e.index == 4)
            $('#accedi').css('visibility', 'initial');
          
          /*
          if(e.index == 0) {
            $('.ps-carousel').css('background-color', '#4d74cd');
            $('#MainContent').css('background-color', '#4d74cd');
          }
          else {
            $('.ps-carousel').css('background-color', 'initial');
            $('#MainContent').css('background-color', '#FFFFFF');
          }
          */
          
        });
        
        instance.show(0);
        
      });
      
      
    }(window, window.Code.Util, window.Code.PhotoSwipe));
    
    
    
   $('#page-tutorial').live('pageinit', 'pageshow', function() {


       // preload delle ultime 2 immagini cosi che si trovino già in cache
       // photoswipe infatti precarica solo le prime 3 immagini.
       new Image().src = 'images/tutorial/group-mobile.jpg';
       new Image().src = 'images/tutorial/notify-mobile.jpg';

    
      xHeight = null;
    if(window.screen != null)
      xHeight = window.screen.availHeight;
  
    if(window.innerHeight != null)
      xHeight =   window.innerHeight;
  
    if(document.body != null)
      xHeight = document.body.clientHeight;
      

    $('#PhotoSwipeTarget').css('height', xHeight - 120);

   }); 
    
    
    
    
    
  </script>
      

      
      
   
      <!-- header -->
      <div data-role="header" id="Header" style="text-align: center" data-theme="f">        
        <!-- <h1>giftshake</h1> -->
        <!-- <h1 class="logo"><i class="sp_6jxgq1 sx_df432d"></i></h1> -->
      </div>
    
      <div data-role="content" id="MainContent"  > 
      
      
    <div id="PhotoSwipeTarget"></div>
    <div id="Indicators">
        <span></span>
        <span></span>
        <span></span>
        <span></span>        
        <span></span>
    </div>


  <!--<a style="margin-top: 20px; visibility: hidden" target="_blank" href="http://giftshake.it" id="accedi" data-transition="slideup" data-corners="false" data-role="button"  data-theme="b" >Registrati !</a>-->
      <a style="margin-top: 20px; visibility: hidden" href="#login-page" id="accedi" data-transition="slideup" data-corners="false" data-role="button"  data-theme="b" class="show-page-loading-msg" >Accedi !</a>

          <!-- class="show-page-loading-msg" -->
  </div>
  
  
      
      
      
    <div style="text-align: center" id="Footer"  data-role="footer" data-theme="c" >
      <ul style="list-style: none; padding: 0">
        <li>
         <a data-inline="true" href="" 
             style ="text-decoration: none; font-size: 13px; color: #999999 ">Giftshake © 2013</a>       
         
         <a data-inline="true" href="" 
             style ="text-decoration: none; padding-left: 20px; font-size: 13px; color: #999999" >Guida
         </a>
        </li>
     </ul>
   </div>
      
    
    
    </div> <!-- end page -->


    